<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shopping Cart</title>
    <style>
        .shopping{
            width: 500px;
            height: 600px;
            margin: 0 auto;
            border: 6px solid #f2f2f2;
            box-shadow:0 7px 17px rgb(0 0 0 / 20%);
            border-radius: 26px;
            position: relative;
        }
        ul{
            display: flex;
            justify-content: space-around;
        }
        ul > li{
            list-style: none;
            font-size: 26px;
        }
        .button{
            width: 100px;
            height: 30px;
            line-height: 30px;
            background-color: rgb(38, 29, 29);
            color: #fff;
            border-radius: 36px;
            padding: 5px;
        }
        .listItem{
            height: 60px;
            margin-top: 30px;
        }
        .TotalPrice{
            position: absolute;
            font-size: 26px;
            bottom: 60px;
            right: 40px;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        
        let one = {
            template:`
                <div>
                    <ul class="listItem">
                        <li>{{  item.name }}</li>
                        <li>{{  item.price }}</li>
                        <ul class="button">
                            <li @click="reduse(item)" class="left">-</li>
                            <li class="left">{{ item.count}}</li>
                            <li @click="add(item)" class="right">+</li>
                        </ul>
                    </ul>
                    </div>`,
                props:['item','indexCom'],
                methods:{
                    reduse(indexCom){
                        // this.$emit('setA',item)
                        this.$emit('setA',indexCom)
                    },
                    add(item){
                        this.$emit('setAdd',item)
                    }
                },
                // methods:{
                //     reduce(item){
                //     if(this.item.count<=1){
                //         alert('最少只能买一个哦');
                //     }else{
                //         this.item.count--;
                //     }
                // },
                // add(item){
                //         if(this.item.count >= 4){
                //         alert('最多只能买四件哦');
                //         }else{
                //             this.item.count++;
                //         }
                //     }
                // }
                // }
        }
        // Vue.component('ftr',one);
        let Home = {
            template:`
            <div class="shopping">
                <div  v-for="(item,index) in list" >
                    <ftr :item="item" indexCom="index" @setAdd="add" @setA="reduce"></ftr>
                </div>
                <div class="TotalPrice">商品总价是{{ Price }}</div>
            </div>`,
            components:{ 'ftr': one },
            data(){
                return {
                    count:1,
                    list:[
                        {name:'苹果',price:11, count:1, id:0 },
                        {name:'香蕉',price:22, count:1, id:1 },
                        {name:'梨子',price:33, count:1, id:2 },
                        {name:'葡萄',price:44, count:1, id:3 },
                        {name:'芒果',price:55, count:1, id:4 },
                    ],
                }
            },
            computed:{
                Price(){
                    let sum = 0;
                    this.list.map(item=>{
                        sum += item.price * item.count;
                    });
                    return sum
                },
            },
            methods:{
                reduce(index){
                    console.log()
                    if(this.list[index].count<=1){
                        alert('最少只能买一个哦');
                    }else{
                        this.list[index].count--;
                    }
                },
                add(item){
                        if(item.count >= 4){
                        alert('最多只能买四件哦');
                        }else{
                            item.count++;
                        }
                    }
                }
            }
        new Vue({
            render:function(h){
                return h(Home)
            }
        }).$mount('#app');
    </script>
</body>
</html>